<template>
  <div class="guide">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="g-img" src="../../../public/img/g1.jpg" alt="" />
          <img class="g-slogo" src="../../../public/img/logo.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img class="g-img" src="../../../public/img/g2.jpg" alt="" />
          <img class="g-slogo" src="../../../public/img/logo.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img class="g-img" src="../../../public/img/g3.jpg" alt="" />
          <img class="g-slogo" src="../../../public/img/logo.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img class="g-img"  src="../../../public/img/g4.jpg" alt="" />
          <img class="g-logo" src="../../../public/img/logo.png" alt="" />
          <van-button
            class="g-btn"
            color="linear-gradient(to right, #9669a6, #57bab9)"
            :to="{name:'main'}"
            >进入 WRUWRU</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import "swiper/dist/css/swiper.min.css";
import Swiper from "swiper";

export default {
  
  mounted() {

      var mySwiper = new Swiper(".swiper-container", {
      autoplay: {
          delay: 2300,
      }, 
      loop:false,
      effect: "fade",
      fadeEffect: {
        crossFade: true,
      },
        
    });
 
    
    
  },
};
</script>

<style lang="scss" scoped>
.guide {
  width: 100%;
  height: 100%;
  
  img {
    width: 100%;
    // height: 100%;
  }
  .g-img{
     width: 100%;
    height: 100vh;
  }
  .g-logo {
    position: absolute;
    top: 13%;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
  }
  .g-btn {
    position: absolute;

    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
  }
  .g-slogo {
    position: absolute;
    top: 7%;
    width: 40%;
  }
}
</style>